<template>
    <li>
      <div class="select">
        <input
          type="checkbox"
          :checked="good.select"
          @click="good.select = !good.select"
        />
      </div>
      <div class="pic">
        <img :src="good.pic" alt="" />
      </div>
      <div class="name">{{ good.name }}</div>
      <div class="price">
        ￥ <span>{{ good.price }}</span>
      </div>
      <div class="number">
        <!-- 处理边界 -->
        <button :disabled="good.buy_num <= 0" @click="good.buy_num--">-</button>
        <input type="text" v-model="good.buy_num" />
        <button :disabled="good.buy_num >= good.number" @click="good.buy_num++">
          +
        </button>
      </div>
      <div class="subtotal">
        ￥ <span>{{ good.price * good.buy_num }}</span>
      </div>
      <div class="del">
        <button @click="delGood(good.id)">删除</button>
      </div>
    </li>
  </template>
  
  <script>
    import { mapMutations } from 'vuex';

  export default {
    name: "CartItem",
    props: ["good"],
    methods: {
      ...mapMutations(['delOneGood']),
      //自己不能删除，这个组件里面拿到的只是单个的对象，去数据的源头去做修改
      delGood(id) {
        //在bus上放了一个delOneGood的自定义事件，传了你要删除的id过去
        // if (confirm("确定删除该商品吗，亲亲"))this.$store.commit("delOneGood",id);
        // this.$bus.$emit("delOneGood",id);

        //简写↓
        if(confirm("确定删除该商品吗，亲亲"))this.delOneGood(id);
      },
    },
  };
  </script>
  
  <style>
  li {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #333;
    box-sizing: border-box;
    margin: 10px 0;
    border-radius: 10px;
  }
  li > div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 20px;
  }
  li > div > span {
    color: red;
  }
  li > div:first-child > input {
    width: 20px;
    height: 20px;
  }
  li > div > button {
    font-size: 20px;
    padding: 5px 10px;
    cursor: pointer;
  }
  li > div.del > button {
    background-color: red;
    color: #fff;
  }
  li > div.number > input {
    width: 50px;
    height: 24px;
    font-size: 20px;
    text-align: center;
  }
  .select,
  .pic,
  .del {
    width: 100px;
  }
  
  .name,
  .price,
  .subtotal {
    width: 200px;
  }
  
  .number {
    width: 300px;
  }
  </style>
  